<script setup lang="ts">
import { ref, onMounted, InjectionKey, Ref, provide, inject } from 'vue';
import { VueFlow, useVueFlow } from '@vue-flow/core';
import type { Node, Edge } from '@vue-flow/core';
import { nodeTypes, HJNodeType, HJNodeData } from './types/comTypes';
import Panel from './panel/index.vue';

const instance = useVueFlow();

const nodes = ref<HJNodeData[]>([]);
const edges = ref<Edge[]>([]);

// const yuliuKey = Symbol() as InjectionKey<string[]>;
// const keysValues = ref<string[]>([]);
// provide(yuliuKey, keysValues);
//
// const testaaa = inject(yuliuKey);

//  nodes里面添加一个jsonData 作为额外的数据，然后 data中 添加 isSelected 字段，用来判断是否选中.利用TS的内置工具类Parcel或者Omit看看是否能实现

onMounted(() => {
  nodes.value.push({
    id: '3',
    type: HJNodeType.custom,
    data: { label: '测试common node', isSelected: false, isDragging: false },
    position: { x: 25, y: 215 },
    jsonData: JSON.stringify({ name: '测试jsonData', age: 18, operator: '测试operator' }),
  });

  nodes.value.push({
    id: '4',
    type: HJNodeType.nest,
    data: { label: '测试nest node', isSelected: false, isDragging: false },
    position: { x: 25, y: 315 },
    jsonData: JSON.stringify({ name: '返岗丰田个好人图书馆 ', age: 22, operator: '打发打发' }),
  });
  //
  // edges.value.push({ id: 'e1-2', source: '1', target: '2' });
});

// ======= Panel =======
const onPanelAddNode = (nodeType: HJNodeType) => {
  let node: Node = {
    id: `${Date.now()}`,
    type: nodeType,
    data: { label: `panel添加的node type:为${nodeType}` },
    position: { x: 225, y: 5 },
  };

  instance.addNodes(node);
};

onMounted(() => {
  let hjnode: HJNodeData = {
    id: `${Date.now()}`,
    type: HJNodeType.custom,
    data: { label: '测试common node' },
    position: { x: 225, y: 5 },
    jsonData: JSON.stringify({ name: '测试jsonData', age: 18, operator: '测试operator' }),
  };
});
</script>

<template>
  <div class="out-box">
    <VueFlow v-model:nodes="nodes" v-model:edges="edges" :node-types="nodeTypes" style="border: 1px solid red">
      <Panel @addNode="onPanelAddNode"></Panel>
    </VueFlow>
  </div>
</template>

<style scoped lang="less">
.out-box {
  width: 100%;
  height: 80vh;
  border: 1px solid #ccc;
  padding: 10px;
}
</style>
